<script setup lang="ts">
import CouponTemplateFormPanel from './CouponTemplateFormPanel.vue'
import CouponStatus from './components/CouponStatus.vue'
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { useDictLabel, useForm, useTable } from '@/hooks'
import { useUserStore } from '@/stores'
import { CouponApi } from '@/apis'
import { formatMoney } from '@/utils/common'

defineOptions({
  name: 'CouponTemplateIndex',
})

const CouponTemplateFormPanelRef = ref<InstanceType<typeof CouponTemplateFormPanel>>()

const userStore = useUserStore()
const { form, resetForm } = useForm<CouponApi.CouponTemplateQuery>({
  name: undefined,
})

const {
  tableData,
  loading,
  pagination,
  search,
  handleDelete,
} = useTable(pagination => CouponApi.getCouponTemplatePage({ ...form, ...pagination }))

const columns: TableInstanceColumns[] = [

  { title: '名称', dataIndex: 'name', slotName: 'name', width: 240, fixed: 'left' },
  // { title: '类型', dataIndex: 'discountType', slotName: 'discountType', width: 80 },
  { title: '面额', dataIndex: 'discountAmount', slotName: 'discountAmount', width: 160 },
  // { title: '使用门槛', dataIndex: 'thresholdAmount', slotName: 'thresholdAmount', width: 180 },
  { title: '发放数量', dataIndex: 'distributedCount', width: 120, render: ({ record }) => `${record.distributedCount}张` },
  { title: '使用/领取', dataIndex: 'receivedCount', width: 120, slotName: 'receivedCount', align: 'center' },
  { title: '有效期', dataIndex: 'validType', slotName: 'validType', width: 200, ellipsis: true, tooltip: true },
  { title: '使用条件', dataIndex: 'limitType', slotName: 'limitType', width: 200, ellipsis: true, tooltip: true },
  { title: '允许叠加', dataIndex: 'stackingUseEnabled', slotName: 'stackingUseEnabled', width: 200 },
  { title: '状态', dataIndex: 'status', slotName: 'status', width: 120 },
  {
    title: '操作',
    slotName: 'action',
    width: 140,
    align: 'center',
    fixed: 'right',
    show: userStore.hasPermission(['shop:coupon:write']),
  },
]

// 删除
const onDelete = (item) => {
  return handleDelete(() => CouponApi.deleteCouponTemplate(item.id), {
    content: `是否确定删除该条数据？`,
    showModal: true,
  })
}
// 新增
const onAdd = () => {
  CouponTemplateFormPanelRef.value?.create()
}
// 编辑
const onEdit = (record) => {
  CouponTemplateFormPanelRef.value?.edit(record.id)
}
</script>

<template>
  <ProPage title="优惠券模板">
    <template #extra>
      <a-button v-permission="['shop:coupon:write']" type="primary" @click="onAdd">
        <template #icon>
          <icon-plus />
        </template>
        <template #default>
          创建优惠券
        </template>
      </a-button>
    </template>
    <ProTable
      :data="tableData"
      :columns="columns"
      :loading="loading"
      :pagination="pagination"
      @refresh="search"
    >
      <template #toolbar-left>
        <a-space size="large">
          <a-input v-model="form.name" placeholder="根据优惠券名称模糊查询" allow-clear style="width: 300px;" @change="search">
            <template #prefix>
              <icon-search />
            </template>
          </a-input>
        </a-space>
      </template>
      <template #name="{ record }">
        <a-space>
          <div class="flex-col-start-start">
            <a-space direction="horizontal">
              <span>{{ record.name }}</span>
              <CellDict :value="record.discountType" code="DiscountTypeEnum" />
            </a-space>
            <a-typography-text copyable type="secondary">
              {{ record.id }}
            </a-typography-text>
          </div>
        </a-space>
      </template>
      <template #discountAmount="{ record }">
        <span v-if="record.discountType === 'MJ'">
          {{ formatMoney(record.discountAmount) }}元
        </span>
        <span v-else-if="record.discountType === 'ZK'">
          打{{ record.discountAmount / 10 }}折
        </span>
        <div v-if="record.thresholdAmount" class="text-xs text-gray-4">
          满{{ formatMoney(record.discountAmount) }}元可用
        </div>
        <div v-else class="text-xs text-gray-4">
          无门槛
        </div>
      </template>
      <template #thresholdAmount="{ record }">
        <span v-if="record.thresholdAmount">
          满{{ formatMoney(record.thresholdAmount) }}元可用
        </span>
        <span v-else>
          无门槛
        </span>
      </template>
      <template #status="{ record }">
        <CouponStatus :status="record.status" />
      </template>
      <!-- <template #discountType="{ record }">
        <CellDict :value="record.discountType" code="DiscountTypeEnum" />
      </template> -->
      <template #receivedCount="{ record }">
        <span>{{ record.usedCount }}/{{ record.receivedCount }}张</span>
      </template>
      <template #validType="{ record }">
        <span v-if="record.validType === 'FIXED'" class="text-13px">
          <span>{{ record.startValidTime }} - <br> {{ record.endValidTime }}</span>
        </span>
        <span v-else-if="record.validType === 'DAYS'">
          领券当日起{{ record.validDays }}天
        </span>
      </template>
      <template #limitType="{ record }">
        <div v-if="record.classIdLimit">
          指定班级可用
        </div>
        <div v-if="record.classGradeLimit">
          限{{ record.classGradeLimit.map(item => useDictLabel('Grade', item)).join('、') }}可用
        </div>
        <div v-if="record.classSubjectLimit">
          限{{ record.classSubjectLimit.map(item => useDictLabel('Subject', item)).join('、') }}可用
        </div>
        <div v-if="record.classCategoryLimit">
          限{{ record.classCategoryLimit.map(item => useDictLabel('ClassCategoryEnum', item)).join('、') }}可用
        </div>
        <div v-if="record.classTermLimit">
          限{{ record.classTermLimit.map(item => useDictLabel('TermEnum', item)).join('、') }}可用
        </div>
        <div v-if="record.classYearLimit">
          限{{ record.classYearLimit.map(item => item).join('、') }}学年可用
        </div>
        <span v-if="!record.classIdLimit && !record.classCategoryLimit && !record.classSubjectLimit && !record.classGradeLimit">
          无限制
        </span>
      </template>
      <template #stackingUseEnabled="{ record }">
        <icon-check-circle-fill v-if="record.stackingUseEnabled" :size="16" :style="{ color: '#00B42A' }" />
        <icon-close-circle-fill v-else :size="16" :style="{ color: '#F53F3F' }" />
      </template>
      <template #action="{ record }">
        <a-space>
          <a-link v-permission="['shop:coupon:write']" @click="onEdit(record)">
            编辑
          </a-link>
          <a-link v-permission="['shop:coupon:write']" status="danger" @click="onDelete(record)">
            删除
          </a-link>
        </a-space>
      </template>
    </ProTable>
    <CouponTemplateFormPanel ref="CouponTemplateFormPanelRef" @change="search" />
  </ProPage>
</template>

<style lang="less" scoped>
</style>
